<template>
  <div class="searchPosition">
    <a-space direction="vertical" >
      <a-input-search
        v-model:value="searchText"
        placeholder="input search text"
        enter-button
        @search="onSearch"
      />
    </a-space>
  </div>

<a-list :data-source="InterfaceData">
  <template #header>
    <h2>在线调用接口</h2>
  </template>
  
  <template #renderItem="{ item }">
    <a-list-item>
      <a-list-item-meta
      :description=item.description
    >
      <template #title>
        {{item.ifname}}
      </template>
      
    </a-list-item-meta>
      <template #actions>
        <a key="list-loadmore-edit" @click="callInterface(item.id)">在线调用</a>
      </template>

    </a-list-item>
  </template>
  </a-list>


  
</template>
<script lang="ts" setup>
import { ref ,onMounted} from 'vue';
import axios from '../config/axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const searchText = ref();

const InterfaceData = ref();
onMounted(()=>{
  getInterface()
})
const getInterface = async()=>{
  const res = await axios.get('/interfaceInfo/list/page')
  InterfaceData.value = res.data.data.records

}

const callInterface = (id)=>{
  router.push(
    {
      path:'/interface/call',
      query:{
        id:id
      }}
  )
}

const onSearch = (searchText) => {
  console.log('use value', searchText);
};
</script>

<style>
  .searchPosition{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
  }
</style>

